<template>
  <div class="system-account">
    <a-card style="width: 100%">
      <div class="filter">
        <a-form layout="inline" :model="filterState">
          <a-form-item label="搜索问题" name="question">
            <a-input v-model:value="filterState.question" placeholder="请输入"></a-input>
          </a-form-item>
          <a-form-item label="分类一">
            <a-select
              style="width: 180px"
              v-model:value="filterState.label_top"
              placeholder="请选择"
              @change="getSecondLabel"
            >
              <a-select-option
                v-for="item in firstLabelList"
                :key="item.value"
                :value="item.value"
                >{{ item.label }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item label="分类二">
            <a-select
              style="width: 180px"
              v-model:value="filterState.label_second"
              placeholder="请选择"
            >
              <a-select-option v-for="item in secondLabelList" :key="item.id" :value="item.id">{{
                item.label
              }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
        <div class="action-btns">
          <a-space>
            <a-button type="primary" @click="getMessageList">查询</a-button>
            <a-button v-permission="['管理者']" @click="openAddModal">新增</a-button>
          </a-space>
        </div>
      </div>
    </a-card>
    <div class="content">
      <a-card style="width: 100%">
        <a-table :dataSource="messageList" :columns="messageColumns" :pagination="{ onChange: handlePageChange, total: pageInfo.total }">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a-space>
                <a-button v-show="!record.answer" type="link" @click="openReplyModal(record)" v-permission="['管理者']">回复</a-button>
                <a-popconfirm
                  title="确定删除吗？"
                  ok-text="确定"
                  cancel-text="取消"
                  @confirm="delMessage(record.id)"
                >
                  <a-button type="link" danger v-permission="['管理者']">删除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </template>
          <template #expandedRowRender="{ record }">
            <p style="margin: 0">回复: {{ record.answer ?? '暂无回复' }}</p>
          </template>
        </a-table>
      </a-card>
    </div>
    <!-- 弹窗 -->
    <Add ref="addModal" @refresh="getMessageList"></Add>
    <Reply ref="replyModal" @refresh="getMessageList"></Reply>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {
  fetchDictionarySelect,
  fetchDictionarySecondLabel,
  fetchMessageList,
  fetchMessageDelete
} from '@/api/message'
import Add from './components/add.vue'
import Reply from './components/reply.vue'
import { message } from 'ant-design-vue'

onMounted(() => {
  getMessageList()
  getFirstLabel()
})

/**
 * filter相关
 */
const filterState = ref<any>({
  question: undefined,
  label_top: undefined,
  label_second: undefined
})

const firstLabelList = ref<any[]>([])
const getFirstLabel = async () => {
  const res = await fetchDictionarySelect({ value: 9 })
  firstLabelList.value = res.data.data
}
const secondLabelList = ref<any[]>([])
const getSecondLabel = async () => {
  const res = await fetchDictionarySecondLabel({ value: filterState.value.label_top })
  secondLabelList.value = res.data.data
}

/**
 * 留言板相关
 */
const messageList = ref<any[]>([])
const getMessageList = async () => {
  const params = {
    page_num: pageInfo.value.page,
    page_size: pageInfo.value.pageSize,
    conditions: [
      {
        key: 'label_top',
        operator: 'like',
        value: filterState.value.label_top ?? ''
      },
      {
        key: 'label_second',
        operator: 'like',
        value: filterState.value.label_second ?? ''
      },
      {
        key: 'question',
        operator: 'like',
        value: filterState.value.question ?? ''
      }
    ],
    order_info: {
      key: 'create_time',
      order: 'desc'
    }
  }
  const res = await fetchMessageList(params)
  messageList.value = res.data.data.map((item: any, index: number) => ({ ...item, key: index }))
  pageInfo.value.total = res.data.paging.total
}
const messageColumns = [
  {
    title: '序号',
    align: 'center',
    width: '80px',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '提问内容',
    dataIndex: 'question',
    key: 'question'
  },
  {
    title: '分类一',
    align: 'center',
    dataIndex: 'label_top_name',
    key: 'label_top_name'
  },
  {
    title: '分类二',
    align: 'center',
    dataIndex: 'label_second_name',
    key: 'label_second_name'
  },
  {
    title: '操作',
    align: 'center',
    width: '120px',
    dataIndex: 'action',
    key: 'action'
  }
]

const delMessage = async (id: number) => {
  const res = await fetchMessageDelete(id)
  if (res.data.code === '200') {
    message.success('删除成功')
    getMessageList()
  } else {
    message.error(res.data.message)
  }
}

const pageInfo = ref({
  page: 1,
  pageSize: 10,
  total: 0
})
const handlePageChange = (page: number, pageSize: number) => {
  pageInfo.value.page = page
  pageInfo.value.pageSize = pageSize
  getMessageList()
}

/**
 * 弹窗相关
 */
// 新增
const addModal = ref()
const openAddModal = () => {
  addModal.value.openModal()
}

const replyModal = ref()
const openReplyModal = (record: any) => {
  replyModal.value.openModal(record)
}
</script>

<style scoped lang="scss">
.system-account {
  .filter {
    display: flex;
    justify-content: space-between;
  }

  .content {
    margin-top: 24px;
  }
}
</style>
